<template>
  <div class="explain-page">
    <div class="router-content">
      <div v-if="pageType == 'list'">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">{{
              10 > scope.$index + 1
                ? "0" + (scope.$index + 1)
                : scope.$index + 1
            }}</template>
          </el-table-column>

          <el-table-column
            prop="serviceName"
            label="服务名称"
          ></el-table-column>
          <el-table-column prop="updateName" label="修改人"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间">
            <template slot-scope="scope" v-if="scope.row.updateTime">
              {{ scope.row.updateTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" :width="188">
            <template slot-scope="scope">
              <el-tag
                @click="handleOptions({ key: '1', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >详情</el-tag
              >
              <el-tag
                v-if="edit"
                @click="handleOptions({ key: '2', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >编辑</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 50px"
          @current-change="handlePageChange"
          :current-page="pageParams.pageNum"
          :page-sizes="[pageParams.pageSize]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <div v-else class="form-page">
        <!-- <h5>{{ currentRow.serviceName }}</h5> -->
        <el-form
          :model="formModel"
          :rules="forRules"
          ref="formModel"
          label-width="100px"
        >
          <el-form-item label="名称：">
            {{ currentRow.serviceName }}</el-form-item
          >
          <el-form-item label="修改人：" v-if="currentRow.updateName">
            {{ currentRow.updateName }}</el-form-item
          >
          <el-form-item label="修改时间：" v-if="currentRow.updateTime">
            {{ currentRow.updateTime |formatTime }}</el-form-item
          >
          <el-form-item label="内容" prop="serviceContent">
            <quill-editor
              :disabled="pageType == 'details'"
              v-model="formModel.serviceContent"
              :options="options"
              class="ql-editor ql-box"
              @change="onEditorChange"
            />
          </el-form-item>
          <el-form-item style="marginTop: 30px">
            <el-button
              v-if="pageType != 'details'"
              type="primary"
              @click="submitForm('formModel')"
              :loading="$store.state.subLoading"
              >提交</el-button
            >
            <el-button
              v-if="pageType != 'details'"
              @click="closeForm('formModel')"
              >取消</el-button
            >
            <el-button
              v-if="pageType == 'details'"
              type="primary"
              @click="pageType = 'list'"
              :loading="$store.state.subLoading"
              >返回</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import { toolBars, handlers } from "@/utils/ToolBars.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import api from "@/api/modules/service/explain";
export default {
  components: { quillEditor },
  data() {
    return {
      edit: true, //按钮权限

      options: {
        placeholder: "请输入...",
        modules: { toolbar: { container: toolBars, handlers: handlers } },
      },
      pageType: "list",
      currentRow: "",
      tableData: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      formModel: {
        serviceContent: "",
      },
      forRules: {
        serviceContent: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 设置页面按钮权限
      let btns = this.$store.state.userInfo.list[3].children[5];
      this.edit = btns.children[0].havePermission;

      this.getData(this.pageParams);
    });
  },
  methods: {
    onEditorChange() {
      this.$refs["formModel"].validateField("serviceContent");
    },
    getData(params) {
      try {
        api.getAssociationServicePage(params?params:this.pageParams).then((res) => {
          this.tableData = res.data;
          this.count = +res.count;
          this.pageType = "list";
        });
      } catch (error) {}
    },
    handlePageChange(val) {
      this.pageParams.pageNum = val;
      this.getData(this.pageParams);
    },
    handleOptions(val) {
      let { key, index } = val;
      this.currentRow = this.tableData[index];
      Object.keys(this.formModel).forEach((item) => {
        this.formModel[item] = "";
      });
      switch (key) {
        case "1":
          api
            .getAssociationService({
              associationServiceId: this.currentRow.associationServiceId,
            })
            .then((res) => {
              Object.keys(this.formModel).forEach((item) => {
                this.formModel[item] = res.data[item];
              });
            });
          this.pageType = "details";
          break;
        case "2":
          api
            .getAssociationService({
              associationServiceId: this.currentRow.associationServiceId,
            })
            .then((res) => {
              Object.keys(this.formModel).forEach((item) => {
                this.formModel[item] = res.data[item];
              });
            });
          this.pageType = "edit";
          break;
      }
    },
    closeForm(formName) {
      this.$refs[formName].resetFields();
      this.pageType = "list";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit("setSubLoading", true);
          api
            .modifyAssociationService({
              ...this.formModel,
              ...{ associationServiceId: this.currentRow.associationServiceId },
            })
            .then((res) => {
              this.$message.success("编辑成功");
              this.getData(this.pageParams);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.explain-page {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.form-page {
  // width: 55%;
  margin: 0 auto;
  h5 {
    border-bottom: 1px solid #000;
    height: 40px;
    margin-top: 0;
    font-size: 18px;
  }
  
}
</style>
